import React, { Suspense } from "react";
import { Layout, Button, Card, Divider, Input, Row, Col, Icon } from "antd";
import Header from "@/layouts/Header";
import { connect } from "dva";
import styles from "./index.less";
import { routerRedux } from "dva/router";
import { fakeStreamChatRecordList } from "@/services/chatGPT";

import logo from "@/assets/logo.png";
import logoHead from "@/assets/chatGPT/logo.png";
import homeBg from "@/assets/chatGPT/bg.png";
import H0 from "@/assets/chatGPT/h0.png";
import H1 from "@/assets/chatGPT/h1.png";
import A1 from "@/assets/chatGPT/11.png";

const { Content, Sider } = Layout;
const { TextArea } = Input;

import S1 from "@/assets/chatGPT/s.png";
import XXZX from "@/assets/chatGPT/xxzx.png";
import WDWD from "@/assets/chatGPT/wdwd.png";
import ZXYJ from "@/assets/chatGPT/zxyj.png";
import ZXBG from "@/assets/chatGPT/zxbg.png";
import CYCZ from "@/assets/chatGPT/cycz.png";
import WZRS from "@/assets/chatGPT/wzrs.png";

class ChatGPT extends React.Component {
	state = {
		question: "",
		quesionList: [],
		quesionTotal: 0,
	};

	componentDidMount() {
		this.getHistoryList();
	}

	// 历史会话列表
	getHistoryList = async () => {
		let res = await fakeStreamChatRecordList({ current: 1, size: 3 });
		console.log(res);
		this.setState({ quesionList: res.records, quesionTotal: res.total });
	}

	setQuestion = e => {
		this.setState({ question: e.target.value })
	}

	getCustom = () => {
		const { dispatch } = this.props;
		let pathname = "/homeType/custom";
		localStorage.setItem('chat_question', this.state.question);
		dispatch(routerRedux.push({ pathname,param:{chat_question:this.state.question} }));
	}

	setQuestionData = (item, index) => {
		localStorage.setItem('chat_session', JSON.stringify(item));
		localStorage.setItem('tab_active', index);
		this.setState({ question: '' }, () => this.getCustom());
	}

	render() {
		const { question, quesionList, quesionTotal } = this.state;

		return (
			<div className={styles.homeLayoutBox}>
				<Layout style={{ minHeight: "100vh" }}>
					<Header logo={logo} isHome={true} />
					<Content className={styles.content}>
						<div style={{ background: `url(${homeBg}) no-repeat`, backgroundSize: '100% 100%', height: 'calc(100vh - 64px)', margin: '-16px', overflow: 'hidden' }}>
							<div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
								<div style={{ width: '1200px' }} className={styles.centerBox}>
									{/* <div style={{ textAlign: 'center', margin: '85px 0 50px' }}>
										<img src={logoHead} />
									</div> */}
									<div style={{ textAlign: 'center', margin: '120px 0 50px' }}></div>
									<div className={styles.chatQuestion}>
										<TextArea
											placeholder="请输入你的想法~"
											value={question}
											onChange={this.setQuestion}
											rows={3}
											style={{ borderStyle: 'none', boxShadow: 'none' }}
											onPressEnter={e => {
												e.preventDefault();
												this.getCustom();
											}}
										/>
										<div onClick={this.getCustom}> <img src={S1} width="30" /> </div>
									</div>
									<div className={styles.hisplayList}>
										{quesionList && quesionList.length > 0 ? quesionList.map((item, index) => {
											return (
												<span key={index} className={styles["hisplayLi_active"]} title={item.question} onClick={() => this.setQuestionData(item, index)}>
													{/* <img src={H0} width="14" /> */}
													<Icon type="clock-circle" />
													<span style={{ marginLeft: 6 }}>{item.question}</span>
												</span>
											)
										}) : null}
										{quesionTotal && quesionTotal > 3 ? (
											<span>
												<span style={{ letterSpacing: '3px', padding: '0 5px' }}>···</span>
											</span>
										) : null}
									</div>
									<div style={{ margin: '30px 0 20px' }} className={styles.chatCardBox}>
										<div className={styles.chatCard}>
											<span><img src={A1} width="14" /></span>
											<span>辅助高效办公，试试这些任务：</span>
										</div>
									</div>
									<div>
										<Row gutter={[45, 24]}>
											<Col span={6}>
												<div className={styles.cardIcon} onClick={() => this.setState({ question: '' }, () => this.getCustom())}>
													<div><img src={XXZX} width="50" /></div>
													<div>信息咨询</div>
												</div>
											</Col>
											<Col span={6}>
												<div className={styles.cardIcon} onClick={() => this.setState({ question: '' }, () => this.getCustom())}>
													<div><img src={WDWD} width="50" /></div>
													<div>文档问答</div>
												</div>
											</Col>
											<Col span={6}>
												<div className={styles.cardIcon} onClick={() => this.setState({ question: '' }, () => this.getCustom())}>
													<div><img src={ZXYJ} width="50" /></div>
													<div>撰写邮件</div>
												</div>
											</Col>
											<Col span={6}>
												<div className={styles.cardIcon} onClick={() => this.setState({ question: '' }, () => this.getCustom())}>
													<div><img src={ZXBG} width="50" /></div>
													<div>撰写报告</div>
												</div>
											</Col>
											<Col span={6}>
												<div className={styles.cardIcon}>
													<div><img src={CYCZ} width="50" /></div>
													<div>创意创作</div>
												</div>
											</Col>
											<Col span={6}>
												<div className={styles.cardIcon}>
													<div><img src={WZRS} width="50" /></div>
													<div>文章润色</div>
												</div>
											</Col>
										</Row>
									</div>
								</div>
							</div>
						</div>
					</Content>
				</Layout>
			</div>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(ChatGPT);
